<template>
  <div class="related_tasks_box">
    <EquipmentItem
      v-for="item in planList"
      :key="item.id"
      :data="item"
      @click="handleEquipmentItem(item)"
    />
    <van-overlay :show="showOverlay" class-name="loading_overlay">
      <van-loading class="loading" type="spinner" color="#1989fa" />
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getBacklogList } from '@/api/potInspectionPlan.js';
const router = useRouter();
const route = useRoute();

const planList = ref([]);
const showOverlay = ref(false);

onMounted(() => {
  getList();
});

function getList() {
  // if (!route.params.deviceId) return;
  showOverlay.value = true;

  getBacklogList(route.params.deviceId)
    .then((res) => {
      if (res.code == 200) {
        planList.value = res.data || [];
      }
    })
    .catch((err) => {
      console.log('err', err);
    })
    .finally(() => {
      showOverlay.value = false;
    });
}
function handleEquipmentItem(item) {
  router.push({
    name: 'inspectionTask',
    params: {
      type: 1,
      id: item.id,
    },
  });
}
</script>

<style lang="scss" scoped>
.related_tasks_box {
  padding-bottom: 24px;
}
</style>
